
<script>
$(document).ready(function(){

	//Hides the icons when the page is loaded
$('#email span').hide();
$('#userName2 span').hide();
$('#userName span').hide();
$('#pwd span').hide();
$('#pwd2 span').hide();
$('#name span').hide();


/**
 * Regularexprecion to check the username, after each click or keypres in the inputfield,
 * this will be run. To check of the user input is correct if so, green CSS and OK icon,else Red and cross icon
 */
$('#userName input').on("click keyup", function(){
	$('#userName span').hide();
	var inputVal = $(this).val();
	var userNameRegex = new RegExp(/^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$/i);
	if(!userNameRegex.test(inputVal)){
		$('#userName span').show();
		$('#userName span').removeClass(" glyphicon-ok");
		$('#userName').removeClass(" has-success");
		$('#userName span').addClass(" glyphicon-remove");
		$('#userName').addClass(" has-error");
	}else{
		$('#userName span').removeClass(" glyphicon-remove");
		$('#userName').removeClass(" has-error");
		$('#userName span').addClass(" glyphicon-ok");
		$('#userName').addClass(" has-success");
		$('#userName span').show();
	}
});

/**
 * Regularexprecion to check the username, after each click or keypres in the inputfield,
 * this will be run. To check of the user input is correct if so, green CSS and OK icon,else Red and cross icon
 */
$('#userName2 input').on("click keyup", function(){
	$('#userName2 span').hide();
	var inputVal = $(this).val();
	var userNameRegex = new RegExp(/^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$/i);
	if(!userNameRegex.test(inputVal)){
		$('#userName2 span').show();
		$('#userName2 span').removeClass(" glyphicon-ok");
		$('#userName2').removeClass(" has-success");
		$('#userName2 span').addClass(" glyphicon-remove");
		$('#userName2').addClass(" has-error");
	}else{
		$('#userName2 span').removeClass(" glyphicon-remove");
		$('#userName2').removeClass(" has-error");
		$('#userName2 span').addClass(" glyphicon-ok");
		$('#userName2').addClass(" has-success");
		$('#userName2 span').show();
	}
});
/**
 * Regularexprecion to check the email, after each click or keypres in the inputfield,
 * this will be run. To check of the user input is correct if so, green CSS and OK icon,else Red and cross icon
 */
$('#email input').on("click keyup", function(){
	$('#email span').hide();
	var inputVal = $(this).val();
	var emailRegex = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
	if(!emailRegex.test(inputVal)){
		$('#email span').show();
		$('#email span').removeClass(" glyphicon-ok");
		$('#email').removeClass(" has-success");
		$('#email span').addClass(" glyphicon-remove top");
		$('#email').addClass(" has-error");
	}else{
		$('#email span').removeClass(" glyphicon-remove");
		$('#email').removeClass(" has-error");
		$('#email span').addClass(" glyphicon-ok");
		$('#email').addClass(" has-success");
		$('#email span').show();
	}
});
/**
 * Regularexprecion to check the password, after each click or keypres in the inputfield,
 * this will be run. To check of the user input is correct if so, green CSS and OK icon,else Red and cross icon
 */
$('#pwd input').on("click keyup", function(){
	$('#pwd span').hide();
	var inputVal = $(this).val();
	var pwdRegex = new RegExp(/^[ÆØÅæøåa-zA-Z0-9]{8,20}$/);
	if(!pwdRegex.test(inputVal)){
		$('#pwd span').show();
		$('#pwd span').removeClass(" glyphicon-ok");
		$('#pwd').removeClass(" has-success");
		$('#pwd span').addClass(" glyphicon-remove");
		$('#pwd').addClass(" has-error");
	}else{
		$('#pwd span').removeClass(" glyphicon-remove");
		$('#pwd').removeClass(" has-error");
		$('#pwd span').addClass(" glyphicon-ok");
		$('#pwd').addClass(" has-success");
		$('#pwd span').show();
	}
});
/**
 * Regularexprecion to check the password, after each click or keypres in the inputfield,
 * this will be run. To check of the user input is correct if so, green CSS and OK icon,else Red and cross icon
 */
$('#pwd2 input').on("click keyup", function(){
	$('#pwd2 span').hide();
	var inputVal = $(this).val();
	var pwdRegex = new RegExp(/^[ÆØÅæøåa-zA-Z0-9]{8,20}$/);
	if(!pwdRegex.test(inputVal)){
		$('#pwd2 span').show();
		$('#pwd2 span').removeClass(" glyphicon-ok");
		$('#pwd2').removeClass(" has-success");
		$('#pwd2 span').addClass(" glyphicon-remove");
		$('#pwd2').addClass(" has-error");
	}else{
		$('#pwd2 span').removeClass(" glyphicon-remove");
		$('#pwd2').removeClass(" has-error");
		$('#pwd2 span').addClass(" glyphicon-ok");
		$('#pwd2').addClass(" has-success");
		$('#pwd2 span').show();
	}
});
/**
 * Regularexprecion to check the name, after each click or keypres in the inputfield,
 * this will be run. To check of the user input is correct if so, green CSS and OK icon,else Red and cross icon
 */
$('#name input').on("click keyup", function(){
	$('#name span').hide();
	var inputVal = $(this).val();
	var nameRegex = new RegExp(/^[ÆØÅæøåa-åA-Å -]+/);
	if(!nameRegex.test(inputVal)){
		$('#name span').show();
		$('#name span').removeClass(" glyphicon-ok");
		$('#name').removeClass(" has-success");
		$('#name span').addClass(" glyphicon-remove");
		$('#name').addClass(" has-error");
		
	}else{
		$('#name span').removeClass(" glyphicon-remove");
		$('#name').removeClass(" has-error");
		$('#name span').addClass(" glyphicon-ok");
		$('#name').addClass(" has-success");
		$('#name span').show();
	}
});
 // Placing the tool top to be shown over the icon 
$(".top").tooltip({
    placement: "top"
});

});
</script>

<p><a class="btn btn-sm btn-info"
	data-toggle="modal"
	data-target="#regUser" >Registrer</a></p>
	            	
<!-- Modal/Dialog for registering a new user -->	
 <div class="modal fade" id="regUser" tabindex="-1" role="dialog" aria-labelledby="regUser" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
		<div class="modal-header">
	  		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	 		<h4 class="modal-title" id="myModalLabel">Registrer</h4><p>Hold musepekeren over iconene for å få hjelp</p>
		</div>
		<div class="modal-body">
	    	<form onsubmit="return false;">
	    		<div id="userName" class="form-group has-feedback">
	    			<input type="text" class="form-control" name="userName" placeholder="Brukernavn" />
	    			<span id="userName" class="top glyphicon glyphicon-remove form-control-feedback "  style="top: 0;"  
	    			data-original-title="Brukernavn må bestå av bokstaver(a til Z) eller tall, og være mellom 2 til 20 tegn"></span>
				</div>
				<div id="userName2" class="form-group has-feedback">
	    			<input type="text" class="form-control"  name="userName2" placeholder="Gjenta brukernavnet" />
	    			<span id="userName2" class="top glyphicon glyphicon-remove form-control-feedback "  style="top: 0;"  
	    			data-original-title="Brukernavn må bestå av bokstaver(a til Z) eller tall, og være mellom 2 til 20 tegn"></span>
				</div>
				<div id="email" class="form-group has-feedback">
					<input type="email" class="form-control" name="email" placeholder="Epost adresse"  />
					<span id="email" class="top glyphicon glyphicon-remove form-control-feedback " style="top: 0;" 
					data-original-title="Epost må være et gyldig format(abc@domene.no)"></span>
				</div>			
				<div id="pwd" class="form-group has-feedback">
					<input type="password" class="form-control" name="pwd" placeholder="Ønsket passord"/>
					<span id="pwd" class="top glyphicon glyphicon-remove form-control-feedback " style="top: 0;" 
					data-original-title="Passord må ha følgende kriterier: Tall og minst en liten bokstav og minst en stor bokstav og være mellom 8 og 20 tegn langt"></span>
				</div>
			
				<div id="pwd2" class="form-group has-feedback">
					<input type="password" class="form-control" name="pwd2" placeholder="Gjenta passord"/>
					<span id="pwd2" class="top glyphicon glyphicon-remove form-control-feedback " style="top: 0;" 
					data-original-title="Har de samme kriteriene som feltet ovenfor, og må være likt feltet over"></span>
				</div>
				<div id="name" class="form-group has-feedback">
					<input type="text"  class="form-control" name="name" placeholder="Navn"/>
					<span id="name" class="top glyphicon glyphicon-remove form-control-feedback " style="top: 0;"
					data-original-title="Kan kun bestå av bokstaver og bindestreker"></span>
				</div>
				
				<input type="text"  class="form-control has-feedback" name="homeTown" placeholder="Hjemsted(valgfritt)"/>
		
				<div id="alertRegUser_placeholder" class="fade"></div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Lukk</button>
				    <button type="button" class="btn btn-primary"  onclick="javascript:newUserFormCheck(this.form)">Lagre</button>
				</div>
				</form>
			</div>
		</div>
	</div>
</div>
